<script setup>
import {useRoute} from "vue-router";
import TimeSvg from "@/components/icon/TimeSvg.vue";
import ViewSvg from "@/components/icon/ViewSvg.vue";
const route = useRoute();
console.log(route.params.productId)
const productId = route.params.productId
</script>

<template>
<main class="detail_container">

 <div style="background-color: white">
   <van-image :src="`https://oss.toubutu.com/yexing/image/p${productId}.jpg`" style="max-height: 200px" radius="5px"/>
   <p class="product-name">这是产品名称</p>
    <!-- 浏览量统计  -->
   <div class="product-analysis">
     <p style="display: flex;align-items: center;font-size: 14px">
       <TimeSvg class="svg-icon"/>
       <span >2024-12-01</span></p>
     <p style="display: flex;align-items: center;font-size: 14px;margin-left: 5px">
       <ViewSvg class="svg-icon"/>
       <span>121</span>
     </p>
   </div>
   <div class="product-desc">
     <span style="font-weight: bold;margin-right: 10px">产品描述:</span>这款电子元件连接器采用高品质材料精制而成，具有卓越的导电性能和耐用性。其设计精巧，结构紧凑，能够高效稳定地连接各种电子设备，确保信号传输的准确性和速度。连接器触点采用镀金工艺，有效防止氧化和腐蚀，延长使用寿命。同时，该产品具备良好的插拔手感，操作简便快捷，适用于多种应用场景。无论是工业自动化、通信设备还是消费电子领域，这款电子元件连接器都能提供可靠的性能保障，是电子工程师和DIY爱好者的理想选择。
   </div>
   <el-button>1</el-button>
 </div>
</main>
</template>

<style scoped>
.detail_container{
  margin: 10px;
  background: #fafafa;
}
.product-name{
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}
.product-analysis{
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.svg-icon{
  width: 14px;
  height: 14px;
  margin-right: 3px;
}
.product-desc{
  margin-top: 10px;
}
</style>